<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<style>
    .input-file:hover {
        background:#ccc;
        cursor:pointer;
    }
    .input-file {
        display:inline-block;
        margin:0 0 0 0 !important;
        position:relative;
    }

    .input-file input {
        opacity:0;
        filter:alpha(opacity=0);
        font-size:100px;
        position:absolute;
        top:0;
        right:0;
</style>

<form class="form-horizontal" role="form" id="form">
    <div class="form-group">
        <label  class="col-sm-2 control-label">文件上传</label>
        <div class="col-sm-10">


            <div class="input-file" type="button"  onclick="">
                <img src="/images/timg.jpg" id="showImg" />

                <div id="progress" class="progress" style="display: none;width: 200px;">
                    <div id="progressBar" class="progress-bar" aria-valuenow="0" aria-valuemax="100" aria-valuemin="0" style="width:0%;">
                    </div>
                </div>
            </div>


        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        </div>
    </div>
</form>

<script type="text/javascript" src="/lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/lib/layer/layer.js"></script>

<script type="text/javascript" src="/lib/handlebars/handlebars-v4.0.5.js"></script>
<script type="text/javascript" src="/lib/handlebars/handlebars-extend.js"></script>

<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="/lib/bootstrap/js/bootstrap.min.js"></script>



<link async rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css"/>
<link async rel="stylesheet" href="/lib/materialdesign/css/materialdesignicons.min.css"/>
<link href="/lib/pretty/pretty.min.css" rel="stylesheet" />


<script type="text/javascript"  src="/lib/common/common.js"></script>

<link rel="stylesheet" href="/lib/lobibox/css/Lobibox.min.css">
<script src="/lib/lobibox/js/lobibox.min.js"></script>

<script src="/lib/qiniu/key.js"></script>
<script src="/lib/qiniu/plupload.full.min.js"></script>
<script src="/lib/qiniu/qiniu.min.js"></script>
<script src="/lib/qiniu/ui.js"></script>


<link type="text/css" href="/lib/component/css/cc.css" rel="stylesheet" />
<script type="text/javascript"  src="/lib/component/js/cc.js"></script>

<script type="text/javascript">
    var DOMAIN_URL = "http://oyxr5nbal.bkt.clouddn.com/";


    var getSize = function(size) {
        if (size < 1000) {
            return size + " BYTE";
        }
        size = (size / 1000).toFixed(2);
        if (size < 1000) {
            return size + " KB";
        }
        size = (size / 1000.0).toFixed(2);
        return size + " MB";
    };

    function upload(){
        var option = {
            runtimes : "html5,html4", // 上传模式，依次退化
            browse_button : "file", // 上传选择的点选按钮，必需
            uptoken_url :"/base/file/getuploadToken", // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
            get_new_uptoken : false, // 设置上传文件的时候是否每次都重新获取新的uptoken
            domain : "/mytest", // bucket域名，下载资源时用到，必需
            max_file_size : "100mb", // 最大文件体积限制
            max_retries : 2, // 上传失败最大重试次数
            chunk_size : "4mb", // 分块上传时，每块的体积
            auto_start : true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
            init : {
                Key : key,
                'FileUploaded' : function(up, file, info) {
                    $("#progress").fadeOut();
                    var key = eval("(" + info + ")").key;
                    var f = {
                        key : key,
                        name : file.name,
                        type : file.type,
                        size : getSize(file.size)
                    };
                    appendFile(f);
                },
                'FilesAdded' : function(up, files) {},
                'BeforeUpload' : function(up, file) {
                   $("#progress").fadeIn();
                },
                'UploadProgress' : function(up, file) {
                    $("div#progressBar").css("width", file.percent + "%");
                },
                'Error' : function(up, err, errTip) {
                    $("#progress").fadeOut();
                    console.log(up);
                    console.log(err);
                    console.log(errTip);
                    alert("上传文件出错");
                }
            }
        };

        var uploader = Qiniu.uploader(option);
    }


    /*

     var option1 = {
     key : val ,
     ……
     };
     var uploader = Qiniu.uploader(option1);
     var Qiniu2 = new QiniuJsSDK();
     var option2 = {
     key : val ,
     ……
     };
     var uploader2 = Qiniu2.uploader(option2);

    */

    var appendFile = function(f) {
        var imgUrl = "";
        if (f.type.indexOf("image") > -1) {
            imgUrl = DOMAIN_URL + f.key + IMAGE_SHOW;
        } else {
            imgUrl = "/images/download.png";
        }
        $("#showImg").attr("src",imgUrl);
    };
   upload();
</script>
</body>
</html>
